<template>
  <section class="modals-box">
    <article v-if="data.type == 'list'">
      <ul v-if="data.class">
        <li>菜单1</li>
        <li>菜单2</li>
        <li>菜单3</li>
        <li>菜单4</li>
      </ul>
      <p v-else class="text-center" style="padding: 20px 0;">点击绑定小菜单</p>
    </article>
    <article v-if="data.type == 1">
      <img :src="data.img" alt="">
    </article>
    <template v-if="data.type == 2">
      <h5>{{data.title}}</h5>
      <article class="img-text-box boxs">
        <img class="cell-bl-1" :src="data.img" alt="">
        <div class="cell-bl-3" v-html="data.html"></div>
      </article>
    </template>
    <template v-if="data.type == 3">
      <article class="search-box">
        <input type="text" :placeholder="data.placeholder"><label for="">查询</label>
      </article>
    </template>
    <template v-if="data.type == 4">
      <ul v-if="data.list&&data.list.length>0" class="list">
        <li class="boxs" v-for="item in data.list">
          <div class="cell-bl-1 img">
            <img src="" alt="">
          </div>
          <div class="cell-bl-4">
            ttt
          </div>
        </li>
      </ul>
      <p v-else class="text-center">编辑列表</p>
    </template>
    <template v-if="data.type == 5">
      <article>
        <video width="100%" height="240" controls>
          <source :src="data.url" type="video/mp4">
          <source :src="data.url" type="video/ogg">
        </video>
      </article>
    </template>
    <template v-if="data.type == 6">
      <div class="text-box">
        <h5 v-if="data.title">{{data.title}}</h5>
        <article  v-html="data.html">

        </article>
      </div>
    </template>
    <template v-if="data.type == 7">
      <form action="">
          <div class="control is-horizontal">
            <div class="control-label">
              <label class="label">姓名</label>
            </div>
            <div class="control">
              <input class="input" type="text">
            </div>
          </div>
          <div class="control is-horizontal">
            <div class="control-label">
              <label class="label">昵称</label>
            </div>
            <div class="control">
              <input class="input" type="text">
            </div>
          </div>
          <div class="control is-horizontal">
            <div class="control-label">
              <label class="label">手机号</label>
            </div>
            <div class="control">
              <input class="input" type="text">
            </div>
          </div>
          <div class="control is-horizontal">
            <div class="control-label">
              <label class="label">留言</label>
            </div>
            <div class="control">
              <textarea class="textarea" name="" id="" cols="30" rows="10"></textarea>
            </div>
          </div>
          <div class="control is-horizontal">
            <div class="control-label">
              <label class="label">Favicon</label>
            </div>
            <div class="control">
              <div class="control is-fullwidth">
                <input class="input" type="text">
              </div>
            </div>
          </div>
          <div class="control text-center" style="padding: 20px">
            <button class="button is-primary">保存</button>
            <button class="button">还原</button>
          </div>
      </form>
    </template>
    <template v-if="data.type == 8">
      <div class="swiper-container1">
        <div class="swiper-wrapper">
          <div v-for="item in data.banner" v-if="item.enabled" class="swiper-slide">
            <div class="titleimg" style="background: url(http://ocpshpa2y.bkt.clouddn.com/sdly/banner/img_03.jpg) no-repeat;background-size:100%;">
            </div>
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </template>
    <template v-if="data.type == 9">
      <div v-if="data.classId">
        <slot></slot>
      </div>
      <p v-else class="text-center">编辑列表</p>
    </template>
  </section>
</template>

<script>
  import Swiper from 'swiper'
  export default {

    data () {
      return {
      }
    },
    props:['data'],
    methods:{
      setBanner(){
        var wid = $('.modals-box').width();
        $(".titleimg,.swiper-container1").height(wid/4+"px");
        //
        var swiper = new Swiper('.swiper-container', {
          pagination: '.swiper-pagination',
          paginationClickable: true,
          prevButton: '.swiper-button-prev',
          nextButton: '.swiper-button-next',
          autoplay: 2000
        });

        var swiper1 = new Swiper('.swiper-container1', {
          pagination: '.swiper-pagination',
          paginationClickable: true,
          direction: 'vertical',
          autoplay: 3000
        });
      }
    },
    mounted () {
      this.setBanner()
    }

  }
</script>

<style scoped>
  .search-box{
    width: 80%;
    border-radius: 20px;
    height: 30px;
    padding: 10px auto;
    margin: 0 auto;
    line-height: 30px;
    position: relative;
    overflow: hidden;
    border: 1px solid #dfdfdf;
  }
  .search-box input{
    width: 100%;
    padding-right: 40px;
    text-indent: 10px;
  }
  .search-box label{
    text-align: center;
    display: inline-block;
    width: 40px;
    background: #eee;
    position: absolute;
    height: 100%;
    right: 0;
    top:0;
  }
  .img-text-box{
     box-shadow: none;
  }
  .img-text-box>div{
    padding: 10px 0 10px 10px;
  }

  .text-box{
    padding: 20px 10px;
  }
  h5{
    font-size: 18px;
  }
  .button{
    width: 80px;
  }
  .boxs{
    display: -moz-box;
    display: -webkit-box;
    display: box;
  }
  .cell-bl-1 {
    display: block;
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
  }

  .cell-bl-2 {
    display: block;
    -moz-box-flex: 2;
    -webkit-box-flex: 2;
    box-flex: 2;
  }

  .cell-bl-3 {
    display: block;
    -moz-box-flex: 3;
    -webkit-box-flex: 3;
    box-flex: 3;
  }

  .cell-bl-4 {
    display: block;
    -moz-box-flex: 4;
    -webkit-box-flex: 4;
    box-flex: 4;
  }

  .cell-bl-5 {
    display: block;
    -moz-box-flex: 5;
    -webkit-box-flex: 5;
    box-flex: 5;
  }

  .cell-bl-6 {
    display: block;
    -moz-box-flex: 6;
    -webkit-box-flex: 6;
    box-flex: 6;
  }
</style>

<style>

.modals-box{
  text-align: left;
  white-space: normal;
}

  .img{
    max-width: 20%;
    overflow: hidden;
  }
  .list li{
    border-bottom: 1px solid #dfdfdf;
    height: 120px;
  }

</style>
